import fs from 'node:fs'
import express from 'express'
import { JSDOM } from 'jsdom'
import fetch from 'node-fetch'

const router = express.Router() //路由模块
router.get('/', (req, res) => {
  const dom = new JSDOM(`<!DOCTYPE html><header>喵喵喵0.0</header><div id='app'></div>`)

  const document = dom.window.document

  const window = dom.window
  console.log('fetch', typeof fetch)
  /*   
  fetch('https://api.example.com/data')  
  .then(response => response.json())  
  .then(data => console.log(data))  
  .catch(error => console.error('Error:', error)); 
  */

  // Node.js v17.5版本中增加了对Fetch API的支持
  // 尽管 "node-fetch" 在功能上与浏览器的 fetch API 相似，
  // 但它返回的是一个 Node.js 的 Stream，而不是一个 Promise。
  // 因此，在处理响应数据时，你需要调用 response.json() 或 response.text()
  fetch('https://api.thecatapi.com/v1/images/search?limit=10&page=1')
    .then(res => res.json())
    .then(data => {
      console.log(data)
      const app = document.getElementById('app')
      data.forEach(item => {
        const img = document.createElement('img')
        img.src = item.url
        img.style.width = '200px'
        img.style.height = '200px'
        app.appendChild(img)
      })
      fs.writeFileSync('./public/cat.html', dom.serialize())
      // res.render('cat', { title: 'cat' })
      res.redirect('/cat.html')
    })
})

export default router
